import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
class ThemeSwitch extends Component {
  static contextTypes = {
    store: PropTypes.object
  }

  // dispatch action 去改变颜色
  handleSwitchColor(color){
    if (this.props.onSwitchColor) {
      this.props.onSwitchColor(color)
    }
  }
  render () {
    return (
      <div>
        <button onClick={this.handleSwitchColor.bind(this, 'red') } style={{color:this.props.themeColor}}>Red</button>
        <button onClick={this.handleSwitchColor.bind(this,'blue')}  style={{color:this.props.themeColor}}>Blue</button>
      </div>
    )
  }
}

// 告诉connect组件，如何触发dispatch方法
const mapDispatchToProps=(dispatch)=>{
  return {
    onSwitchColor:(color)=>{
      dispatch({
        type:'CHANGE_COLOR',
        themeColor:color
      })
    }
  }
}

const mapStateToProps=(state)=>{
  return {
    themeColor:state.themeColor
  }
}
ThemeSwitch=connect(mapStateToProps,mapDispatchToProps)(ThemeSwitch)
export default ThemeSwitch